<template>
	<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
		<el-table-column type="index" label="序号" width="80" />
		<el-table-column prop="componentName" label="组件名称" />
		<el-table-column prop="componentUsageType" label="组件使用类型" />
		<el-table-column prop="location" label="部署位置">
			<template #default="scope">
				{{ dictionary.location(scope.row.location) }}
			</template>
		</el-table-column>
		<el-table-column prop="areas" label="功能领域">
			<template #default="scope">
				{{ dictionary.areas(scope.row.areas) }}
			</template>
		</el-table-column>
		<el-table-column prop="businessArea" label="业务领域">
			<template #default="scope">
				{{ dictionary.businessArea(scope.row.businessArea) }}
			</template>
		</el-table-column>
		<el-table-column prop="componentType" label="组件类型">
			<template #default="scope">
				{{ dictionary.componentType(scope.row.componentType) }}
			</template>
		</el-table-column>
		<el-table-column prop="introduction" label="组件描述" />
	</el-table>
</template>

<script lang="ts" setup>
import dictionary from '../dictionary.js';
import { toRefs, defineProps } from 'vue';

const props = defineProps({
	tableData: Array,
});

const { tableData } = toRefs(props);
</script>

<style lang="scss" scoped></style>
